<template>  
    <div class="detail">
        <detail-nav-bar @active="active" class="detail-nav-bar"></detail-nav-bar>
        
        <scroll :probe-type="3"
            class="content"
            ref="scroll"
            @scroll="showBackTopButtom">
            <commodity 
            class="commodity"
            ref="commodity" 
            :commodit="commodityInfo" 
            :v-if="Object.keys(commodityInfo).length !== 0"  />

            <goods-list ref="goodslist" :v-if="Object.keys(rcommend).length !== 0" :goods="rcommend" />
        </scroll>
        <back-top @click.native="backTopclick" v-show="isShouButtom" />
        <bottom-bar @addToCart="addToCart" class="bottom-bar"/>
    </div>
</template>



<script>
    import Scroll from "components/common/scroll/Scroll"
    import DetailNavBar from "./components/DetailNavBar"
    import Commodity from "views/detail/views/commodity/commodity"
    import GoodsList from "components/common/goods/GoodsList"
    import {debounce} from "common/utils.js"
    import backTop from"components/content/backTop/backTop"
    import bottomBar from "views/detail/views/commodity/bottomBar"
    
    import {getDetail , Goods ,Shop ,GoodsParam , getRecommend } from "network/detail"

    

    export default {
        name:"Detail",
        data(){
            return {
                isShouButtom : false,
                ID : this.$route.params.ID,
                res : null,
                commodityInfo:{},    //commodity所有参数,
                rcommend:[],
                refresh : {},
                positionYs:[0,0,0,0]
            }
        },
        components:{
            DetailNavBar,
            Commodity,
            Scroll,
            GoodsList,
            backTop,
            bottomBar
        },
        created(){
            //获取录播图图片和商品信息商店信息
            this.TgetDetail()
            this.TgetRecommend()

        },
        methods:{
            active(i){
                this.$refs.scroll.scroll.scrollTo(0,-this.positionYs[i] , 100)
            },
            loadMore(){    //请求新图片    
                this.refresh();  
            },
            backTopclick(){   //放回顶部
                this.$refs.scroll.scroll.scrollTo(0,0)
            },
            showBackTopButtom(position){  //展示按钮
                this.isShouButtom = position.y < -1000
            },
            TgetDetail(){
                getDetail(this.ID).then(res => {
                    this.res = res.data.result
                    
                    // this.commodityInfo.pictures = this.res.itemInfo.topImages
                    // this.commodityInfo.iShop = new Shop(this.res.shopInfo)
                    // this.commodityInfo.itemInfo = new Goods(this.res.itemInfo , this.res.columns , this.res.shopInfo.services)
                    // this.commodityInfo.detailInfo = this.res.detailInfo
                    // this.commodityInfo.paramInfo = new GoodsParam(this.res.itemParams.info , this.res.itemParams.rule)
                    // this.commodityInfo.commentInfo = this.res.cRate !==0 ? this.res.rate.list[0] : {}
                    //commodity所有信息
                    this.commodityInfo = {               
                        pictures : this.res.itemInfo.topImages,
                        iShop    : new Shop(this.res.shopInfo),
                        itemInfo :new Goods(this.res.itemInfo , this.res.columns , this.res.shopInfo.services),
                        detailInfo : this.res.detailInfo,
                        paramInfo : new GoodsParam(this.res.itemParams.info , this.res.itemParams.rule),
                        commentInfo : this.res.cRate !==0 ? this.res.rate.list[0] : {}
                    }
                })
            },
            TgetRecommend(){
                getRecommend().then(res => {
                    this.rcommend = res.data.data.list
                })
            },
            addToCart(){
                const product = {};
                product.image = this.commodityInfo.pictures[0];
                product.title = this.commodityInfo.itemInfo.title;
                product.desc  = this.commodityInfo.itemInfo.desc;
                product.price = this.commodityInfo.itemInfo.nowPrice;
                product.iid = this.ID;

                // 2.将商品增加到购物车里面
                this.$store.dispatch('addToCart', product).then(res => {
                    // this.show = true
                    // setTimeout(() => {
                    //     this.show = false
                    // },1500)

                    this.$toast.show(res, 2000)
                })
            }
        },
        mounted(){
            setTimeout(() => {
                if( typeof (this.$refs.scroll) != "undefined") 
                    this.refresh = debounce(this.$refs.scroll.scroll.refresh(),5000)
            }, 2000);

            this.$bus.on("itemClick",(iid) => {
                this.ID = iid
                this.TgetDetail()
                this.TgetRecommend()
            })

            // this.$nextTick(() => {
                
            //     this.positionYs = []

            //     this.positionYs.push(0)
            //     this.positionYs.push(this.$refs.commodity.$refs.goodsinfo.$el.offsetTop)
            //     this.positionYs.push(this.$refs.commodity.$refs.paraminfo.$el.offsetTop)
            //     this.positionYs.push(this.$refs.goodslist.$el.offsetTop)

            // })

        },
        updated(){
            
                
            this.positionYs = []

            this.positionYs.push(0)
            this.positionYs.push(this.$refs.commodity.$refs.goodsinfo.$el.offsetTop)
            this.positionYs.push(this.$refs.commodity.$refs.paraminfo.$el.offsetTop)
            this.positionYs.push(this.$refs.goodslist.$el.offsetTop)    
        }
    }
</script>

<style scoped>
    .detail {
        width: calc(100%);
        height: calc(100%);
    }
    .detail-nav-bar{
        position:fixed;
        top  :  0px;
        right:  0px;
        left :  0px;
        z-index: 1px;
    }
    
  .content {
    position:fixed;
    top  :  45px;
    right:  0px;
    left :  0px;
    height: calc(100% - 93px);
    overflow: hidden;
  }
  .bottom-bar {
    z-index: 2;
  }
</style>